import React, { useState, useEffect } from 'react'
import style from './Comment.module.css'
import { Link } from 'react-router-dom'
export default function Comment(props) {
  let [dataFlag, changeDataFlag] = useState(false)
  let [avatar, changeAvatar] = useState('/public/img/defaultAvatar/avatar.png')
  useEffect(() => {
    if (props.userData) {
      changeDataFlag(true)
      if (props.userData.avatar != '') {
        changeAvatar(props.userData.avatar)
      }
    }
  }, props.userData)
  return (
    <div>
      <div className={style.commentView}>
        {
          dataFlag ?
            <div className={style.commentList}>
              {
                props.commentData.map(el => {
                  return (
                    <div className={style.item}>
                      <img src={avatar} alt="" />
                      <div className={style.info}>
                        <div className={style.nameView}>
                          <h3>{props.userData.username}</h3>
                          <div></div>
                          <h3>{el.bookname}</h3>
                        </div>
                        <div className={style.content}>{el.content}</div>
                        <Link className={style.button} to={{ pathname: `/xiangqing/${el.bookID}` }}>跳转</Link>
                      </div>
                    </div>
                  )
                })
              }
            </div> : ''
        }
      </div>
    </div>
  )
}
